import Taro from '@tarojs/taro';
import React, { useState, useEffect } from 'react';
import { View, Text, Image, ScrollView } from '@tarojs/components';
import { MaterialIcons } from 'taro-icons';
import './index.scss';

// 学员详情类型定义
interface StudentDetail {
  id: number;
  name: string;
  avatar: string;
  phone: string;
  gender: 'male' | 'female';
  age: number;
  enrollDate: string;
  courseType: string;
  currentSubject: string;
  progress: number;
  theoreticalHours: number;
  practicalHours: number;
  coachName: string;
  licenseNumber: string;
  address: string;
  status: 'pending' | 'confirmed' | 'graduated';
  notes: string;
}

const StudentDetailPage: React.FC = () => {
  const [studentDetail, setStudentDetail] = useState<StudentDetail | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [showPhone, setShowPhone] = useState(false);

  useEffect(() => {
    // 获取页面参数
    const currentInstance = Taro.getCurrentInstance();
    const params = currentInstance.router?.params as Record<string, string> | undefined;
    const studentId = params?.id;
    
    if (!studentId) {
      Taro.showToast({
        title: '参数错误',
        icon: 'none'
      });
      Taro.navigateBack();
      return;
    }

    // 设置页面标题
    Taro.setNavigationBarTitle({ title: '学员详情' });
    
    // 加载学员详情数据
    loadStudentDetail(studentId);
  }, []);

  const loadStudentDetail = async (studentId: string | number) => {
    try {
      setIsLoading(true);
      
      // 模拟API调用
      // const response = await getStudentDetailApi(studentId);
      
      // 模拟数据
      const mockStudentDetail: StudentDetail = {
        id: Number(studentId),
        name: '张三',
        avatar: 'https://via.placeholder.com/150',
        phone: '13812345678',
        gender: 'male',
        age: 25,
        enrollDate: '2024-01-15',
        courseType: 'C1手动挡',
        currentSubject: '科目二',
        progress: 45,
        theoreticalHours: 12,
        practicalHours: 16,
        coachName: '李教练',
        licenseNumber: '沪A12345',
        address: '上海市浦东新区张江高科技园区',
        status: 'confirmed',
        notes: '学员学习态度积极，科一已通过，正在练习科目二。'
      };
      
      setStudentDetail(mockStudentDetail);
    } catch (error) {
      console.error('加载学员详情失败:', error);
      Taro.showToast({
        title: '数据加载失败，请重试',
        icon: 'none'
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleShowPhone = () => {
    setShowPhone(true);
  };

  if (isLoading) {
    return (
      <View className="student-detail-page">
        <View className="loading-container">
          <Text>加载中...</Text>
        </View>
      </View>
    );
  }

  if (!studentDetail) {
    return (
      <View className="student-detail-page">
        <View className="empty-container">
          <Text>学员不存在</Text>
        </View>
      </View>
    );
  }

  return (
    <View className="student-detail-page">
      <ScrollView className="detail-scroll">
        {/* 基本信息卡片 */}
        <View className="info-card">
          <View className="header-section">
            <Image className="student-avatar" src={studentDetail.avatar} mode="aspectFill" />
            <View className="student-basic">
              <View className="name-row">
                <Text className="student-name">{studentDetail.name}</Text>
                <View className={`status-badge ${studentDetail.status}`}>
                  <Text className="status-text">{studentDetail.status === 'pending' ? '待确认' : studentDetail.status === 'confirmed' ? '学习中' : '已毕业'}</Text>
                </View>
              </View>
              <Text className="student-info-text">{studentDetail.gender === 'male' ? '男' : '女'} | {studentDetail.age}岁</Text>
              <Text className="student-info-text">{studentDetail.courseType}</Text>
              <Text className="student-info-text">当前科目：{studentDetail.currentSubject}</Text>
            </View>
          </View>

          {/* 联系操作 */}
          <View className="action-buttons">
            <View className="action-btn call-btn">
              <MaterialIcons name="phone" size={32} color="#1890ff" />
              <Text className="action-text">电话联系</Text>
            </View>
            <View className="action-btn message-btn">
              <MaterialIcons name="message" size={32} color="#52c41a" />
              <Text className="action-text">发消息</Text>
            </View>
            <View className="action-btn edit-btn">
              <MaterialIcons name="edit" size={32} color="#faad14" />
              <Text className="action-text">编辑信息</Text>
            </View>
          </View>
        </View>

        {/* 学习进度 */}
        <View className="info-card">
          <Text className="section-title">学习进度</Text>
          <View className="progress-container">
            <View className="progress-bar">
              <View className="progress-fill" style={{ width: `${studentDetail.progress}%` }} />
            </View>
            <Text className="progress-text">{studentDetail.progress}%</Text>
          </View>
          <View className="hours-info">
            <View className="hour-item">
              <Text className="hour-label">理论学时</Text>
              <Text className="hour-value">{studentDetail.theoreticalHours}h</Text>
            </View>
            <View className="hour-item">
              <Text className="hour-label">实操学时</Text>
              <Text className="hour-value">{studentDetail.practicalHours}h</Text>
            </View>
          </View>
        </View>

        {/* 详细信息 */}
        <View className="info-card">
          <Text className="section-title">详细信息</Text>
          <View className="detail-item">
            <Text className="detail-label">报名日期：</Text>
            <Text className="detail-value">{studentDetail.enrollDate}</Text>
          </View>
          <View className="detail-item">
            <Text className="detail-label">手机号码：</Text>
            <View className="phone-container">
              <Text className="detail-value">{showPhone ? studentDetail.phone : `${studentDetail.phone.substring(0, 3)}****${studentDetail.phone.substring(7)}`}</Text>
              {!showPhone && <View className="show-phone-btn" onClick={handleShowPhone}><Text>显示完整号码</Text></View>}
            </View>
          </View>
          <View className="detail-item">
            <Text className="detail-label">教练姓名：</Text>
            <Text className="detail-value">{studentDetail.coachName}</Text>
          </View>
          <View className="detail-item">
            <Text className="detail-label">教练车号：</Text>
            <Text className="detail-value">{studentDetail.licenseNumber}</Text>
          </View>
          <View className="detail-item">
            <Text className="detail-label">居住地址：</Text>
            <Text className="detail-value">{studentDetail.address}</Text>
          </View>
        </View>

        {/* 备注信息 */}
        <View className="info-card">
          <Text className="section-title">备注信息</Text>
          <Text className="notes-text">{studentDetail.notes}</Text>
        </View>

        {/* 待确认状态下显示确认按钮 */}
        {studentDetail.status === 'pending' && <View className="confirm-button"><Text className="confirm-button-text">确认学员</Text></View>}
      </ScrollView>
    </View>
  );
};

export default StudentDetailPage;